@import '../../style/mixin.scss';

.dashboard {
    min-height : 100vh;
    padding-top: 66px;
    margin     : 30px auto;

    .dashboard-right {
        padding         : 25px;
        background-color: #fff;
    }

    .coin-item {
        @include flex();
        margin-right: 15px;
        padding     : 10px 0;
        border      : 1px solid #eee;
        cursor      : pointer;
    }

    .coin-item-active {
        @extend .coin-item;
        border-color: #3F90FA;
    }

    .coin-item-desc {
        @include flex(center, flex-start);
        flex-direction: column;
        margin-left   : 15px;

        span {
            @include font(12px, #808080);
        }

        .title {
            @include font(16px, #000);
            font-weight: 600;
        }
    }

    .coin-item-img{
        width: 40px;
    }

    .dashboard-power {
        margin: 30px 0;
    }

    .power-left {
        @include flex();
        padding         : 20px 0;
        background-color: #F5F5F5;
        flex-direction  : column;

        p {
            @include font(14px, #3F90FA);
            margin: 0;
        }

        big {
            font-size: 30px;
        }

        img {
            width : 70px;
        }

        .power-left-name {
            width       : 100%;
            padding-left: 20px;
        }

    }

    .power-right {
        @include flex(flex-start);
        padding-left    : 45px;
        margin-left     : 15px;
        background-color: #F5F5F5;

        img {
            width       : 120px;
            margin-right: 30px;
        }
    }

    .power-desc {
        @include flex(center, space-between);
        flex-direction: column;
        height        : 120px;

        p {
            margin: 0;
        }
    }

    .power-right-name {
        @include font(14px, #808080);
    }

    .power-num {
        @include font(14px, #808080);

        big {
            @include font(28px, #000);

        }
    }

    .power-price {
        @include font(20px, #808080);
    }

    .dashboard-title {
        @include font(20px, #000);
        margin      : 40px 0 20px;
        padding-left: 10px;
        font-weight : 600;
        border-left : 4px solid #3F90FA;
    }

    .dashboard-type {
        @include flex();
        border-radius   : 10px;
        overflow        : hidden;
        background-color: #f5f5f5;
    }

    .type-item {
        @include font(14px, #808080);
        padding: 2px 20px;
        cursor : pointer;
    }

    .type-item-active {
        @extend .type-item;
        background-color: #3F90FA;
        color           : #Fff;
    }
}